<template>
  <div id="solvefeedback">
    <div class="page-header">
      <span class="title-item">处理反馈</span>
    </div>
    <div class="main-content">
      <div class="block-text">
        <span>异常监测点位</span>
        <span style="margin-left: 30px;color:#bebebe;">XXXXXXXXX</span>
      </div>
      <!-- 表单 -->
      <div>
        <a-form
          :form="form"
          :label-col="{ span: 5}"
          :wrapper-col="{span:16}"
          layout="horizontal"
          :colon="false"
        >
          <a-row type="flex" justify="start">
            <a-col :span="10">
              <a-form-item label="处理结果">
                <a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 80%"
                  :filter-option="filterOption"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  @change="handleChange"
                ></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="处理人">
                <a-select
                  show-search
                  option-filter-prop="children"
                  style="width: 90%"
                  :filter-option="filterOption"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  @change="handleChange"
                ></a-select>
              </a-form-item>
            </a-col>
            <a-col :span="9">
              <a-form-item label="处理完成时间" :label-col="{ span: 6}" :wrapper-col="{span:18}">
                <a-date-picker v-decorator="[ ]" style="width:100%;diaplay:grid;" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-form
        :form="form"
        :label-col="{ span: 2}"
        :wrapper-col="{span:22}"
        layout="horizontal"
        :colon="false"
        style="width:100%;display:grid;"
      >
        <a-row>
          <a-col :span="24">
            <a-form-item class="form-item" label="备注" labelAlign="right">
              <a-textarea placeholder :rows="6" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-item class="form-item" label="现场影像资料" labelAlign="right">
              <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-row class="btn-item">
        <a-button type="primary" style="margin-right: 20px;">确认上报</a-button>
        <a-button class="add-btn">重新填写</a-button>
      </a-row>
    </div>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      imageUrl: "",
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },

  filter: {},
  computed: {},
  watch: {},
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped  lang="scss" >
#solvefeedback {
  position: relative;
  width: 98%;
  padding: 0 2%;
  box-sizing: border-box;
}
#solvefeedback .main-content {
  width: 90%;
  margin: 4% auto;
}
#solvefeedback .block-text {
  margin: 2% 0;
  color: #9fb043;
  font-size: 18px;
}

#solvefeedback.fuze-management > div,
.ant-input,
.exception > div,
.exception-half > div,
.delete-btn {
  background-color: #29423f;
  color: #bebebe;
  border: none;
}
#solvefeedback .btn-item {
  display: flex;
  justify-content: flex-end;
}

#solvefeedback .ant-btn {
  color: #1c2c2c;
  font-weight: 600;
  background-color: #2c6a60 !important;
  border: 0;
  font-size: 18px;
}
#solvefeedback .add-btn {
  color: rgba(255,255,255,0.6);
  border: 1px solid #ccc !important;
  background-color: #2b4341 !important ;
  font-size: 18px;
}

#solvefeedback .ant-form-item-children {
  display: grid;
  width: 100%;
}
</style>